const Highcharts = require("highcharts");
require("highcharts/modules/exporting")(Highcharts);
import { numberFormat } from "./utils";

/**
 * @param {*} container
 * @param {*} data
 */
export default function draw({ container, data = [] }) {
  const arr1 = [];
  const arr = [
    {
      data: arr1,
      type: "column",
      color: "#2C6BD4",
    },
  ];
  data.map((item) => {
    arr1.push({
      y: item.count,
      name: [">=50%", "30%~50%", "10%~30%", "<=10%"][item.type - 1],
    });
  });
  const chartOptions = {
    chart: {
      spacing: [14, 15, 16, 15],
    },
    title: {
      text: "数据日期：" + data[0].pubDate,
      style: {
        fontSize: "14px",
        color: "#999999",
      },
    },
    credits: { enabled: false },
    exporting: { enabled: false },
    legend: { enabled: false },
    xAxis: {
      type: "category",
    },
    yAxis: [
      {
        title: "",
        labels: {
          align: "center",
          formatter() {
            return numberFormat(this.value);
          },
        },
      },
    ],
    series: arr,
    tooltip: {
      backgroundColor: "rgba(0, 0, 0, 0.7)",
      borderColor: "#666666",
      shared: true,
      formatter: function() {
        return this.points.reduce(function(prev, point) {
          const b = `<span>${
            point.key
          }</span><br/><span style="font-size:14px;color:${
            point.color
          }">公司数量:${numberFormat(point.y)}</span>`;
          return b;
        }, "");
      },
    },
    plotOptions: {
      series: {
        pointWidth: 50,
      },
      column: {
        borderWidth: 0,
      },
      spline: {
        lineWidth: 1,
        marker: {
          enabled: false,
          symbol: "circle",
        },
        states: {
          hover: {
            lineWidth: 1,
          },
        },
      },
    },
  };

  Highcharts.chart(container, chartOptions);

  return Highcharts;
}

/// 主题配置
Highcharts.theme = {
  chart: {
    backgroundColor: "#090910",
    plotBorderColor: "#606063",
  },
  xAxis: {
    gridLineColor: "#2C2C30",
    labels: {
      style: {
        color: "#E0E0E3",
      },
    },
    lineColor: "#2C2C30",
    minorGridLineColor: "#505053",
    tickColor: "#2C2C30",
  },
  yAxis: {
    gridLineColor: "#2C2C30",
    labels: {
      style: {
        color: "#E0E0E3",
      },
    },
    lineColor: "#2C2C30",
    minorGridLineColor: "#505053",
    tickColor: "#2C2C30",
    tickWidth: 1,
  },
  tooltip: {
    backgroundColor: "rgba(0, 0, 0, 0.85)",
    style: {
      color: "#F0F0F0",
    },
  },
  plotOptions: {
    series: {
      dataLabels: {
        color: "#F0F0F3",
        style: {
          fontSize: "13px",
        },
      },
      marker: {
        lineColor: "#333",
      },
    },
    boxplot: {
      fillColor: "#505053",
    },
  },
  labels: {
    style: {
      color: "#2C2C30",
    },
  },
};

Highcharts.setOptions(Highcharts.theme);
